<template>
	<view class="flex align-center checkout-ctro position-fixed left-0 right-0 mx-auto"
		:style="{'bottom':(65+getbottom) +'px'}">
		<view v-if="isEdit" class="flex align-center" @tap="selectAll">
			<text class="w-32 h-32  check ml-3" :class="checked?'checked':''"></text>
			<text class="text-white fs-24 letter-spacing ml-1">Select All</text>
		</view>
		<template v-if="!isEdit">
			<text class="fs-28 font-weight-bold text-white ml-4">Total:</text>
			<text class="fs-34 font-weight-bold ftFFB700 ml-1">{{total}}</text>
			<image src="/static/imgs/jinbi.png" mode="aspectFill" class="w-28 h-28 ml-1 mr-auto"></image>
			<view class="bglg1 rounded-circle text-black fs-32 font-weight-bold checkoutbtn flex justify-center align-center"
				@tap="checkout">
				Checkout</view>
		</template>
		<template v-else>
			<view
				class="bgFF0000 rounded-circle text-white fs-32 font-weight-bold checkoutbtn flex justify-center align-center ml-auto"
				@tap="delClick">
				Delete</view>
		</template>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		props: {
			total: {
				type: Number,
				default: 0
			},
			isEdit: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				checked: false
			}
		},
		computed: {
			...mapGetters(['getbottom'])
		},
		created() {

		},
		methods: {
			checkout() {
				this.$emit('checkout')
			},
			delClick() {
				this.$emit('delClick')
			},
			selectAll() {
				this.checked = !this.checked
				this.$emit('selectAll', this.checked)
			}
		}
	}
</script>

<style lang="scss">
	.checkout-ctro {
		height: 96rpx;
		width: 694rpx;
		background-image: url('/static/imgs/checkout_bg.png');
		background-size: 100%;
		background-repeat: no-repeat;
		background-position: center top;

		.checkoutbtn {
			width: 112px;
			height: 44px;
			margin-right: 2px;
		}
	}
</style>